<!DOCTYPE html>
<html>
	<head>
		<title>css 3D</title>
		<style>
			.cube-box{
				transform-style: preserve-3d;
				width: 30px;
				height: 100px;
				position: relative;
			}

			.cube{
				position: absolute;
				left: 0;
				top: 0;
			}
			
			.cube1{
				width: 100%;
				height: 100%;
				background: red;
			}
			
			.cube-box{
				transform: rotateX(-30deg) rotateY(45deg);
			}
			
			.cube2{
				width: 100%;
				height: 100%;
				background: green;
				transform-origin: left top;
				transform: rotateY(-90deg);
			}
			
			.cube3{
				width: 100%;
				height: 100%;
				background: blue;
				transform-origin: right top;
				transform: rotateY(90deg);
			}
			
			.cube4{
				width: 100%;
				height: 100%;
				background: gray;
				transform-origin: right top;
				transform: translateZ(30px);
			}
		</style>
	</head>
	<body>
		<div class="cube-box">
			<div class="cube1 cube"></div>
			<div class="cube2 cube"></div>
			<div class="cube3 cube"></div>
			<div class="cube4 cube"></div>
			<div class="cube5 cube"></div>
			<div class="cube6 cube"></div>
		</div>
	</body>
	<script>
		
	</script>
</html>